<template>
  <el-table ref="dragTable" :data="formData" :max-height="tableHeight" row-key="columnId">
    <el-table-column :show-overflow-tooltip="true" label="字段列名" prop="columnName" min-width="150" fixed />
    <el-table-column label="字段标题" min-width="100" fixed>
      <template #default="scope">
        <el-input v-model="scope.row.columnTitle" />
      </template>
    </el-table-column>
    <el-table-column label="字段描述" min-width="100">
      <template #default="scope">
        <el-input v-model="scope.row.columnComment" />
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="true" label="物理类型" width="120" prop="dataType" />
    <!-- 暂时隐藏 -->
    <!-- <el-table-column label="Java类型" min-width="100">
      <template #default="scope">
        <el-select v-model="scope.row.javaType">
          <el-option label="Long" value="Long" />
          <el-option label="String" value="String" />
          <el-option label="Integer" value="Integer" />
          <el-option label="Double" value="Double" />
          <el-option label="BigDecimal" value="BigDecimal" />
          <el-option label="LocalDateTime" value="LocalDateTime" />
          <el-option label="Boolean" value="Boolean" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="java属性" min-width="100">
      <template #default="scope">
        <el-input v-model="scope.row.javaField" />
      </template>
    </el-table-column> -->
    <el-table-column label="新建" min-width="60">
      <template #default="scope">
        <el-checkbox v-model="scope.row.createOperation" false-label="false" true-label="true" />
      </template>
    </el-table-column>
    <el-table-column label="编辑" min-width="60">
      <template #default="scope">
        <el-checkbox v-model="scope.row.updateOperation" false-label="false" true-label="true" />
      </template>
    </el-table-column>
    <el-table-column label="列表" min-width="60">
      <template #default="scope">
        <el-checkbox v-model="scope.row.listOperationResult" false-label="false" true-label="true" />
      </template>
    </el-table-column>
    <el-table-column label="查询" min-width="60">
      <template #default="scope">
        <el-checkbox v-model="scope.row.listOperation" false-label="false" true-label="true" />
      </template>
    </el-table-column>
    <el-table-column label="查询方式" min-width="100">
      <template #default="scope">
        <el-select v-model="scope.row.listOperationCondition">
          <el-option label="=" value="=" />
          <el-option label="!=" value="!=" />
          <el-option label=">" value=">" />
          <el-option label=">=" value=">=" />
          <el-option label="<" value="<>" />
          <el-option label="<=" value="<=" />
          <el-option label="LIKE" value="LIKE" />
          <el-option label="BETWEEN" value="BETWEEN" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="允许空" min-width="70">
      <template #default="scope">
        <el-checkbox v-model="scope.row.nullable" false-label="false" true-label="true" />
      </template>
    </el-table-column>
    <el-table-column label="最小长度(值)" width="150">
      <template #default="scope">
        <el-input-number size="small" v-model="scope.row.minLength" />
      </template>
    </el-table-column>
    <el-table-column label="最大长度(值)" width="150">
      <template #default="scope">
        <el-input-number size="small" v-model="scope.row.maxLength" />
      </template>
    </el-table-column>
    <el-table-column label="正则校验" min-width="120">
      <template #default="scope">
        <el-input v-model="scope.row.verificationRules" />
      </template>
    </el-table-column>
    <el-table-column label="显示类型" min-width="100">
      <template #default="scope">
        <el-select v-model="scope.row.htmlType">
          <el-option label="文本框" value="input" />
          <el-option label="数字框" value="number" />
          <el-option label="文本域" value="textarea" />
          <el-option label="下拉框" value="select" />
          <el-option label="单选框" value="radio" />
          <el-option label="复选框" value="checkbox" />
          <el-option label="日期控件" value="datetime" />
          <el-option label="图片上传" value="imageUpload" />
          <el-option label="文件上传" value="fileUpload" />
          <el-option label="富文本控件" value="editor" />
          <el-option label="Java枚举" value="javaenum" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="字典类型" min-width="100">
      <template #default="scope">
        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
          <el-option v-for="dict in dictOptions" :key="dict.id" :label="dict.name" :value="dict.type" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="示例" min-width="100">
      <template #default="scope">
        <el-input v-model="scope.row.example" />
      </template>
    </el-table-column>
    <el-table-column label="关联表" width="180">
      <template #default="scope">
        <el-select v-model="scope.row.joinTableId" placeholder="请选择" clearable
          @change="handleJoinTableChange(scope.row.joinTableId, scope.row)">
          <el-option v-for="(itemT, indexT) in joinTableList" :key="indexT"
            :label="itemT.tableName + ': ' + itemT.tableComment" :value="itemT.id" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="关联字段" min-width="120">
      <template #default="scope">
        <el-select v-model="scope.row.joinColumnId" placeholder="请选择" clearable>
          <el-option v-for="(itemC, indexC) in scope.row.joinTableColumsList" :key="indexC" :label="itemC.columnComment"
            :value="itemC.id" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="关联显示字段" min-width="120">
      <template #default="scope">
        <el-select v-model="scope.row.joinShowColumnId" placeholder="请选择" clearable>
          <el-option v-for="(itemS, indexS) in scope.row.joinTableShowColumsList" :key="indexS"
            :label="itemS.columnComment" :value="itemS.id" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="多选" min-width="60">
      <template #default="scope">
        <el-checkbox v-model="scope.row.multijoin"  />
      </template>
    </el-table-column>
    <el-table-column label="默认审批状态" min-width="120">
      <template #default="scope">
        <el-input v-model="scope.row.defaultStatus" />
      </template>
    </el-table-column>
    <el-table-column label="完成审批状态" min-width="120">
      <template #default="scope">
        <el-input v-model="scope.row.completedStatus" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import * as CodegenApi from '@/api/infra/codegen'
import * as DictDataApi from '@/api/system/dict/dict.type'

defineOptions({ name: 'InfraCodegenColumInfoForm' })

const props = defineProps({
  table: {
    type: Object as PropType<CodegenApi.CodegenTableVO>,
    required: true
  },
  columns: {
    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
    default: () => null
  }
})

const formData = ref<CodegenApi.CodegenColumnVO[]>([])
const tableHeight = document.documentElement.scrollHeight - 350 + 'px'

/** 查询字典下拉列表 */
const dictOptions = ref<DictDataApi.DictTypeVO[]>()
const getDictOptions = async () => {
  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
}

watch(
  () => props.columns,
  (columns) => {
    if (!columns) return
    formData.value = columns
  },
  {
    deep: true,
    immediate: true
  }
)

// 关联表列表
const joinTableList = ref<CodegenApi.CodegenTableVO[]>([])
watch(
  () => props.table,
  async (table) => {
    if (!table) return
    // 加载表列表
    if (table.dataSourceConfigId >= 0) {
      joinTableList.value = await CodegenApi.getCodegenTableList(props.table.dataSourceConfigId)
    }
  },
  {
    deep: true,
    immediate: true
  }
)

// 关联表的字段列表
const handleJoinTableChange = async (elId, row) => {
  row.joinColumnId = null
  row.joinShowColumnId = null
  row.joinTableColumsList = []
  row.joinTableShowColumsList = []
  if (elId !== '' && elId !== undefined) {
    const data = await CodegenApi.getCodegenTable(elId)
    if (data) {
      //从data.columns中过滤primaryKey==true的结果
      row.joinTableColumsList = data.columns.filter((item) => item.primaryKey)
      row.joinTableShowColumsList = data.columns.filter((item) => item.javaType === 'String')
    }
  }
}

onMounted(async () => {
  await getDictOptions()
})
</script>
